﻿<div id="@TabsId" class="tabs @CssClass" style="@Style">
    <div class="tabs-tab-list">
        @for (var i = 0; i < Tabs.Panels.Count; i++)
        {
            var tabIndex = i;
            <div class="@GetTabClass(tabIndex)" @onclick="()=>OnTabClicked(tabIndex)">
                <div>@Tabs.Panels[tabIndex].Caption</div>
                <XafImage CssClass="delete-tab" ImageName="Actions_Delete" Color="#999" Size="16" @onclick="()=>OnDeleteTab(tabIndex)" />
            </div>
        }
        <div class="tab-tools ignore-elements">
            <XafImage CssClass="tab-tool tool-add" ImageName="Actions_Add" Color="#999" Size="16" @onclick="OnAddTab" />
            <XafImage CssClass="tab-tool tool-setting" ImageName="Actions_Settings" Color="#999" Size="16" @onclick="OnSetting" />
            <XafImage CssClass="tab-tool tool-delete" ImageName="Actions_Delete" Color="#999" Size="16" @onclick="OnDelete" />
        </div>
    </div>
    <div class="tabs-content-panels">
        @for (var i = 0; i < Tabs.Panels.Count; i++)
        {
            var panel = Tabs.Panels[i];
            <PanelComponent @key="panel.Oid" CssClass="@GetTabPanelClass(i)" Panel="panel" Root="true" />
        }
    </div>
</div>